import React, { useState, useEffect } from 'react'
import { leve1, leve2 } from '../../type/cate'
import { getSort } from '../../api/cate'
import styles from './cate.module.scss'
import classNames from 'classnames'
import { Empty } from 'antd-mobile'

export default function Index () {
  const [categories, setCategories] = useState<leve1[]>([])
  const [currentIndex, setCurrnetIndex] = useState(0)
  const [level2List, setLevel2List] = useState([] as leve2[])

  const getCateData = async () => {
    const res = await getSort()
    setCategories(res.data)
    // console.log(res.data)
  }

  useEffect(() => {
    if (categories[currentIndex]) {
      setLevel2List(categories[currentIndex].children)
    }
  }, [currentIndex, categories])
  useEffect(() => {
    getCateData()
  }, [])

  return (
    <div style={{ width: '100%' }}>
      <div className={styles.scrollViewContainer}>
        {/* <!-- 左边一级分类 --> */}
        <div className='left-scroll-view'>
          {categories.map((item, index) => {
            return (
              <div
                className={classNames('left-scroll-view-item', {
                  active: index === currentIndex
                })}
                key={index}
                onClick={() => {
                  setCurrnetIndex(index)
                }}
              >
                {item.cat_name}
              </div>
            )
          })}
        </div>
        {/* 右边二级和三级分类 */}
        <div className='right-scroll-view'>
          {level2List &&
            level2List.map((item, index) => {
              return (
                <div className='cate-lv2-title' key={item.cat_id}>
                  <h4>{item.cat_name}</h4>
                  {/* 三级分类 */}
                  <div className='cate-lv3-list'>
                    {item.children.map((subitem, index) => {
                      return (
                        <div className='cate-lv3-item' key={index + 1}>
                          <img src={subitem.cat_icon} alt='' />
                          <span className='name'>{subitem.cat_name}</span>
                        </div>
                      )
                    })}
                  </div>
                </div>
              )
            })}
          {!level2List && (
            <Empty
              description='暂无数据'
              style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                paddingTop: 230
              }}
            />
          )}
        </div>
      </div>
    </div>
  )
}
